
<!-- <script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->
<!-- <template>
  <ToDoHeader @addTodo="addTodo"></ToDoHeader> 
<ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain> 
 <ToDoFooter :lastLength="lastLength" @updateStatus="updateStatus"></ToDoFooter> 
</template>


<script setup>
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';

import { ref } from 'vue' 
const list = ref([ 
  { id: 1, name: '晨练', done: false, }, 
  { id: 2, name: '练书法', done: true, }, 
   ]) 


  const addTodo = name => { 
     list.value.push({ name, done: false, id: ~~(Math.random() * 1000) }) 
   } 
   

import { ref, computed } from 'vue' 
   const lastLength = computed(() => { 
   return list.value.filter(item => !item.done).length 
   }) 



const showList = computed(() => { 
     if (status.value === 'all') { 
       return list.value 
     } 
     if (status.value === 'active') { 
       return list.value.filter(item => !item.done) 
     } 
     if (status.value === 'completed') { 
       return list.value.filter(item => item.done) 
    } 
  })


 
const emit = defineEmits(['updateStatus']) 

const updateStatus = status => { 
    status.value = status // 将子组件的状态赋值给父组件 
}
</script> -->



<template>
  <ToDoHeader @addTodo="addTodo"></ToDoHeader> 
  <ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain> 
  <ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></ToDoFooter> 
</template>


<script setup>
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';

// 只需要导入一次ref和computed
import { ref, computed } from 'vue' 

// 任务列表数据
const list = ref([ 
  { id: 1, name: '晨练', done: false }, 
  { id: 2, name: '练书法', done: true } 
]) 

// 添加任务方法
const addTodo = name => { 
  list.value.push({ 
    name, 
    done: false, 
    id: ~~(Math.random() * 1000) 
  }) 
} 

// 删除任务方法（之前缺失）
const delToDo = id => {
  list.value = list.value.filter(item => item.id !== id)
}

// 未完成任务数量计算
const lastLength = computed(() => { 
  return list.value.filter(item => !item.done).length 
}) 

// 当前筛选状态（之前缺失定义）
const status = ref('all')

// 根据状态筛选显示的任务列表
const showList = computed(() => { 
  if (status.value === 'all') { 
    return list.value 
  } 
  if (status.value === 'active') { 
    return list.value.filter(item => !item.done) 
  } 
  if (status.value === 'completed') { 
    return list.value.filter(item => item.done) 
  }
  return list.value // 默认返回全部
})

// 更新筛选状态的方法
const updateStatus = (newStatus) => { 
  status.value = newStatus // 更新状态值
}
</script>
